<script setup>
import { computed, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import api from '@/api/index.js'
import SltFromTable from '@/components/SltFromTable/SltFromTable.vue'
import FarmNj from '@/views//FarmDevManage/FarmNj/FarmNj.vue'
import SysUser from '@/views/SystemManage/SysUser/Child/AppUser/AppUser.vue'
import { phoneRule } from '@/utils/checkRule.js'

const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  faMenuSltOpt: {
    type: Array,
    default: () => ([])
  },
})
// 弹窗标题
const title = computed(() => props.curRow.orderId ? '编辑数据' : '新增数据')
// 表单数据
const formData = ref({
  orderType: '',
  orderNo: '',
  machineId: '',
  applyUserName: '',
  applyUserPhone: '',
  serviceContent: '',
  serviceAddress: '',
  startTime: '',
  endTime: '',
  badImages: '',
  workImages: '',
  orderStatus: '',
  serviceUserId: '',
  serviceRemark: '',
  receiveTime: '',
  finishTime: '',
  createdType: '',
})

// 同步表格数据到表单数据内
watch(() => props.curRow, async (val) => {
  // 按钮类型的父节点id为数组，需要特殊处理
  formData.value = { ...formData.value, ...val }
  if (val.orderId) {
    const { data } = await api.getOrdInfo({ id: val.orderId })
    formData.value = { ...formData.value, ...val, ...data, pickDate: [data.startTime, data.endTime] }
  }
}, { deep: true, immediate: true })
// 是否显示弹窗
const show = ref(false);
// 弹窗显示状态切换时触发
const afterOpenChange = bool => {
  if (!bool) {
    formData.value = {
      orderType: '',
      orderNo: '',
      machineId: '',
      applyUserName: '',
      applyUserPhone: '',
      serviceContent: '',
      serviceAddress: '',
      startTime: '',
      endTime: '',
      badImages: '',
      workImages: '',
      orderStatus: '',
      serviceUserId: '',
      serviceRemark: '',
      receiveTime: '',
      finishTime: '',
      createdType: '',
    }
    emits('close')
  }
};
// 提交按钮loading状态
const submitLoading = ref(false)
// 编辑数据
const emitItem = async (info) => {
  submitLoading.value = true
  let params = {
    ...formData.value, ...info,
    startTime: formData.value?.pickDate?.[0] || '',
    endTime: formData.value?.pickDate?.[1] || ''
  }
  await api.editOrd(params)
  message.success('编辑成功');
  show.value = false
  setTimeout(() => {
    submitLoading.value = false
  }, 30);
  emits('reload')
}
// 新增数据
const addItem = async (info) => {
  submitLoading.value = true
  let params = {
    ...formData.value, ...info,
    startTime: formData.value?.pickDate?.[0] || '',
    endTime: formData.value?.pickDate?.[1] || '',
    orderType: 2,
    createdType: 1
  }
  await api.addOrd(params)
  message.success('新增成功');
  show.value = false
  setTimeout(() => {
    submitLoading.value = false
  }, 30);
  emits('reload')
}
// 表单提交，验证通过了
const onFinish = values => {
  if (formData.value.orderId) {
    emitItem(values)
  } else {
    addItem(values)
  }
};
// 验证失败
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
// 打开弹窗
const open = () => {
  show.value = true;
};
// 表单节点
const formRef = ref()
// 提交表单
const submit = () => {
  formRef.value
    .validateFields()
    .then(onFinish)
    .catch(onFinishFailed);
}
defineExpose({ open })
// const fileChange = (key) => {
//   if (formRef.value?.validateFields) {
//     nextTick(() => {
//       setTimeout(() => {
//         formRef.value.validateFields([key])
//       }, 0);
//     })
//   }
// }
</script>

<template>
  <a-drawer :maskClosable="false" :closable="false" destroyOnClose v-model:open="show" class="custom-class"
    root-class-name="root-class-name" :title="title" placement="right" @after-open-change="afterOpenChange">
    <a-form ref="formRef" :model="formData" layout="vertical" autocomplete="off" @finish="onFinish"
      @finishFailed="onFinishFailed">
      <a-form-item label="农机" name="machineId" :rules="[{ required: true, message: '请输入' }]">
        <a-form-item-rest>
          <SltFromTable v-model="formData.machineId" :component="FarmNj"
            :fieldNames="{ name: 'machineName', id: 'machineId' }" :nameValue="formData.machineName" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="申请人姓名" name="applyUserName" :rules="[{ required: true, message: '请输入' }]">
        <a-input v-model:value="formData.applyUserName" allowClear />
      </a-form-item>
      <a-form-item label="申请人联系电话" name="applyUserPhone" :rules=phoneRule>
        <a-input v-model:value="formData.applyUserPhone" allowClear />
      </a-form-item>
      <a-form-item label="维保内容" name="serviceContent">
        <a-input v-model:value="formData.serviceContent" allowClear />
      </a-form-item>
      <a-form-item label="维保地址" name="serviceAddress" :rules="[{ required: true, message: '请输入' }]">
        <a-input v-model:value="formData.serviceAddress" allowClear />
      </a-form-item>
      <a-form-item label="起止时间" name="pickDate" :rules="[{ required: true, message: '请输入' }]">
        <a-range-picker v-model:value="formData.pickDate" show-time valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="维保人员" name="serviceUserId">
        <a-form-item-rest>
          <SltFromTable v-model="formData.serviceUserId" :component="SysUser"
            :fieldNames="{ name: 'nickName', id: 'memId' }" :nameValue="formData.receiveUserName"
            :params="{ isDriver: 1 }" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="备注" name="serviceRemark">
        <a-input v-model:value="formData.serviceRemark" allowClear />
      </a-form-item>
    </a-form>
    <template #footer>
      <div style="display: flex;gap: 5px;">
        <a-button type="primary" html-type="submit" @click="submit" :loading="submitLoading">提交</a-button>
        <a-button type="primary" ghost @click="show = false">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>